<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> ES6演示</title>
  <style>
    .log{
      background: black;
      color:white;
      padding: 10px 20px;
    }
  </style>
</head>
<body>
    <h2>es6语法演示</h2>
    <div id="log" class="log"></div>
</body>
<script>
  /*
  * let,const没有声明提前
  * 2,模板语言
  * 3,箭头函数，有参数需要写参数，没有则写一个空的
  * 4,当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:
  * */

  let str = `
    console.log("a" + a);
    var a = 1;
    console.log("b" + b);
    let b = 2;
    `;
  printLog(str);
  function  printLog(mtr) {
    document.getElementById("log").innerText = mtr;
  }
  let userName = "jack";
  printLog(`I am ${userName}`);  //不需要拼接，引入变量

  //es5
  function add(flag) {
    if(flag){
      return "true";
    }else{
      return "error";
    }
  }
  // es6
  function sum(flag=true) {
    if(flag){
      return "true";
    }else{
      return "error";
    }
  }
  console.log(add());  //error，es5没有默认值，会报错
  console.log(sum());  //true es6有一个默认值
  var arr = [1,2,3,4];
  // let newArr = arr.map(item => {
  //   return item + 2;
  // })

  let newArr = arr.map( item =>  item + 2);
  console.log(newArr);

  let people = (name, age) => {
    const fullName = 'h' + name;
    return fullName;
  }

//  数组的结构
  let [a,b,c] = [3,4,5]; //a:3,b:4,c:5
  let [x,y,z] = 'vue';  //字符串的分解
  console.log(`x:${x},y:${y},z:${z}`); //x:v,y:u,z:e
  let {m,n} = {m:10,n:20};  //对象的解构，对key进行拆分
</script>
</html>
